<template>
	<!-- 会员中心 -->
	<view class="mbWrap">
		<view class="status_bar">
		
		</view>
		<view class="nav_bar flex align-center justify-between">
			<view @click="$tool.goBack()" class="f0 flex-1 p-3">
				<image class="fanhui_icon" :src="'/static/images/fanhui_'+'dark'+'.png'" mode=""></image>
			</view>
			<view class="A-Medium" :class="'navTitle_dark'">
				{{i18n.m001}}
			</view>
			<view class="flex-1 f0 pl-3 pr-3 flex justify-end">
				<image @click="$tool.navTo('/pages/gmjl/gmjl')" style="width: 56rpx;height: 56rpx;" :src="'/static/images/syjl_'+'dark'+'.png'" mode=""></image>
			</view>
		</view>
		<!-- 顶部卡片 -->
		<view class="topBg flex align-center">
			<view class="ml-4 flex-1">
				<view class="flex align-center">
					<view class="f0 mr-2">
						<image v-if="avatarImg" style="width: 84rpx;height: 84rpx;" :src="$tool.changeImg(avatarImg)" mode="aspectFill"></image>
						<image v-else style="width: 84rpx;height: 84rpx;" :src="'/static/images/defalutAvatar_'+model+'.png'" mode=""></image>
					</view>
					<view class="">
						<view class="A-Medium" style="font-size: 32rpx;color: #0E0F11;">
							{{nickname?nickname:email}}
						</view>
						<view v-if="vipClass!='VIP0'" class="A-Regular" style="font-size: 24rpx;color: #7F838D;">
							{{i18n10.n065}}{{vipClass}}
						</view>
						<view v-else class="A-Regular" style="font-size: 24rpx;color: #7F838D;">
							{{i18n10.n066}}
						</view>
					</view>
				</view>
				<view v-if="vipClass!='VIP0'" class="A-Regular mt-3" style="padding: 6rpx 20rpx;background: rgba(255,255,255,0.3);font-size: 24rpx;color: #7A6D64;border-radius: 1000rpx;min-width: 206rpx;display: inline;">
					{{vipEndTime}}{{i18n10.n067}}
				</view>
				<view v-else class="A-Regular mt-3" style="padding: 6rpx 20rpx;background: rgba(255,255,255,0.3);font-size: 24rpx;color: #7A6D64;border-radius: 1000rpx;min-width: 206rpx;display: inline;">
					{{i18n10.n068}}
				</view>
			</view>
			<view v-if="vipClass!='VIP0'" class="f0">
				<image style="width: 184rpx;height: 152rpx;margin-right: 54rpx;" src="/static/images/vipIcon.png" mode=""></image>
			</view>
			<view v-else class="f0">
				<image style="width: 184rpx;height: 152rpx;margin-right: 54rpx;" src="/static/images/vipIcon2.png" mode=""></image>
			</view>
		</view>
		<!-- 套餐列表 -->
		<view class="mt-4 mb-3 A-Medium ml-3" style="font-size: 32rpx;color: #0E0F11;">
			vip{{i18n10.n069}}
		</view>
		<view v-for="(item,index) in list" @click="changeListIndex(index)" v-if="item.membershipLevel!='VIP0'" class="mx-3 mb-3 flex align-center" style="padding: 26rpx 40rpx;border-radius: 16rpx 16rpx 16rpx 16rpx;border: 2rpx solid #F4EDDF;position: relative;" :style="listIndex==index?'background: #FCF9F2;border: 2rpx solid #DFCDA5;':''">
			<view class="flex-1">
				<view class="A-Medium" style="font-size: 36rpx;color: #5F4E32;">
					{{item.membershipDays}}{{i18n.m008}}
				</view>
				<view class="A-Medium" style="font-size: 24rpx;color: #97948F;">
					{{i18n10.n070}}{{item.arbitrageOrderProcesstime}}h  {{i18n10.n071}}{{item.withdrawalFee}}
				</view>
			</view>
			<view class="A-Medium flex align-center" style="color: #0E0F11;">
				<view class="" style="font-size: 32rpx;">
					$
				</view>
				<view class="" style="font-size: 56rpx;">
					{{item.membershipFee}}
				</view>
			</view>
			<view class=" A-Medium flex align-center justify-center" style="width: 84rpx;height: 38rpx;background: linear-gradient( 90deg, #ECDFB7 0%, #E5C99A 100%);border-radius: 0rpx 16rpx 0rpx 16rpx;border: 2rpx solid #DFCDA5;position: absolute;top: 0;right: 0;font-size: 24rpx;color: #5F4E32;">
				{{item.membershipLevel}}
			</view>
		</view>
		<view @click="submit" class="flex A-Medium align-center" style="position: fixed;bottom: 48rpx;background: #343333;width: 690rpx;height: 94rpx;border-radius: 1000rpx;left: 30rpx;">
			<view class="flex-1 flex align-center ml-6" style="color: #FCEDDC;">
				<view class="" style="font-size: 32rpx;">
					$
				</view>
				<view class="" style="font-size: 56rpx;">
					{{price}}
				</view>
			</view>
			<view class="f0" style="position: relative;">
				<image style="height: 94rpx;" src="/static/images/vipIcon3.png" mode="heightFix"></image>
				<view style="font-size: 32rpx;color: #0E0F11;width: 100%;height: 100%;position: absolute;top: 0;left: 0;text-align: center;line-height: 94rpx;">
					{{i18n10.n072}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		membershipLevelList
	} from '@/core/api/index.js';
	import {
		membershipLevelOpen
	} from '@/core/api/user.js';
	export default {
		data() {
			return {
				pageNo:1,
				pageSize:10,
				list:[1],
				price:'',
				listIndex:1,
				// vipClass:uni.getStorageSync('vipClass'),
				// vipEndTime:uni.getStorageSync('vipEndTime'),
				dayNum:'',
				isSubmit:false,
				isTrade:false,
			}
		},
		onLoad(e) {
			if(e.isTrade){
				this.isTrade = true;
			}
			this.getMembershipLevelList();
			if(this.vipClass!="VIP0"){
				this.daysUntilFutureDate(this.vipEndTime);
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			email() {
				return uni.getStorageSync('email');
			},
			nickname(){
				return this.$store.state.config.nickname;
			},
			avatarImg(){
				return this.$store.state.config.avatarImg;
			},
			vipClass() {
				return this.$store.state.config.vipClass;
			},
			vipEndTime() {
				return this.$store.state.config.vipEndTime;
			},
			i18n() {
				return this.$t('member');
			},
			i18n2(){
				return this.$t('showToast');
			},
			i18n3(){
				return this.$t('trade');
			},
			i18n10() {
				return this.$t('newObj');
			},
			model() {
				return this.$store.state.config.model;
			},
		},
		methods: {
			submit(){
				if(this.vipClass=="VIP1"&&this.list[this.listIndex].membershipLevel=="VIP1"){
					this.$tool.showToast(this.i18n10.n142+'VIP1');
					return;
				}
				if(this.vipClass=="VIP2"&&(this.list[this.listIndex].membershipLevel=="VIP1"||this.list[this.listIndex].membershipLevel=="VIP2")){
					this.$tool.showToast(this.i18n10.n142+'VIP2');
					return;
				}
				if(this.vipClass=="VIP3"&&(this.list[this.listIndex].membershipLevel=="VIP3"||this.list[this.listIndex].membershipLevel=="VIP2"||this.list[this.listIndex].membershipLevel=="VIP1")){
					this.$tool.showToast(this.i18n10.n142+'VIP3');
					return;
				}
				if(this.isSubmit){
					return;
				}else{
					this.isSubmit = true;
				}
				this.$tool.showLoading();
				membershipLevelOpen({
					mobileUserId: uni.getStorageSync('mobileUserId'),
					membershipLevel:this.list[this.listIndex].membershipLevel
				}).then(res=>{
					console.log(res,'cs');
					uni.hideLoading();
					if(res.message.indexOf("余额不足") != -1){
						this.$tool.showToast(this.i18n2.st037);
					} else {
						this.$tool.showToast(this.i18n2.st033);
					}
					this.$store.dispatch('config/getCustomerInfo');
					this.$store.dispatch('config/getAassetList');
					if(this.isTrade){
						setTimeout(res=>{
							uni.navigateBack({delta:1})
						},800)
					}else{
						setTimeout(res=>{
							this.$tool.navTo('/pages/index/index',4)
						},800)
					}
					
				}).catch(res=>{
					uni.hideLoading();
					this.isSubmit = false;
				})
			},
			getMembershipLevelList(){
				membershipLevelList({
					pageNo:this.pageNo,
					pageSize:this.pageSize,
				}).then(res=>{
					this.list = res.result.records;
					for(let i=0;i<this.list.length;i++){
						this.list[i].membershipFee = this.list[i].membershipFee.replace('美金','')
					}
					this.price = this.list[1].membershipFee;
				})
			},
			changeListIndex(e){
				this.listIndex = e;
				this.price = this.list[e].membershipFee;
			},
			daysUntilFutureDate(futureDateString) {
			    const futureDate = new Date(futureDateString);
			    if (isNaN(futureDate.getTime())) {
			        console.error('Invalid date string provided.');
			        return;
			    }
			
			    const currentDate = new Date();
			    const timeDifference = futureDate - currentDate;
			
			    const daysRemaining = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
			
			    this.dayNum = daysRemaining;
			}
		}
	}
</script>

<style scoped lang="scss">
	.mbWrap {
		min-height: 100vh;
		background: url(/static/images/mbBg.png);
		background-repeat: no-repeat;
		background-size: 750rpx auto;
		.topBg {
			width: 690rpx;
			height: 252rpx;
			margin: 0 auto;
			margin-top: 28rpx;
			background: linear-gradient( 90deg, #EBD4AA 0%, #FCF0E2 100%);
			border-radius: 20rpx;
		}
	}
</style>